import { ref,defineComponent,h } from 'vue'
import { ElMenu } from 'element-plus'
import { menuData } from "../demoData";

import mo_Item from "./mo_ItemMenu.vue"
import mo_suBMenu from "../menu/mo_subMenu.vue"

const {MenuItem,SubMenu} = ElMenu;

interface menuUtil {
    name:string ;  //节点的名称
    path:string ;  //节点的路径
    icon?:string;
    url?:string ;  //节点的连接
    children?:Array<menuUtil>  //子节点
}


export default defineComponent({
    name:'moMenu',
    props: {
        options: {
          type: Array,
          required: false
        },
        theme: {
          type: String,
          required: false,
          default: 'dark'
        },
        mode: {
          type: String,
          required: false,
          default: 'inline'
        },
        collapsed: {
          type: Boolean,
          required: false,
          default: false
        },
      },
    watch: {
    },
    methods: {
        renderSubMenu: function (menuItem:any) {
          //-----创建菜单组----------
           // debugger;
            let this_ = this ;
            let childFlag = false ;
            let resArr:any = [];
            let config = {
              index: menuItem.path,
              key: menuItem.path,
              name:menuItem.name,
              props:{
                'name':menuItem.name
              },
            };
            //------判断当前项目是否含有子项目--------
            if(menuItem.children && menuItem.children.length > 0){
              childFlag = true ;
            }

            //------有子项目，需要建立子项目-----------
            if(childFlag == false){
               resArr.push(this.renderMenuItem(menuItem));
            }else {
              //-------绘制当前级------------
              let childItem:any = []; 
              //childItem.push(menuItem.name);
              for(let i = 0 ; i < menuItem.children.length;i++){
                let item = this.renderSubMenu(menuItem.children[i]);
                childItem = childItem.concat(item);
              }
              ///debugger;
              // resArr.push(h(mo_suBMenu,config,childItem));

            }

            return resArr ;

          },
          renderMenuItem(menuItem:any){
            //----创建一个菜单项目---------
            let that = this ;
            let config = {  //项目的配置
              index: menuItem.path,
              key: menuItem.path,
              name:menuItem.name,
              scopedSlots: {
                default: menuItem.name,
              },
            };
            //var childItem : any = [] ;
            //childItem.push(h('span',menuItem.name));
            // ------- 返回菜单项目-------------
            return h(mo_Item,config);
          },
          renderMenu: function (menuTree:any):any {
            let res:any = [];
            for(let i =  0; i < menuTree.length ; i++){
                let item = this.renderSubMenu(menuTree[i]);
                res = res.concat(item);
            }
            return res ;
          },
    },
    data () {
    return {
        selectedKeys: [],
        sOpenKeys: [],
        cachedOpenKeys: []
    }
    },
    created () {
    },
    setup() {

    },
    render(){
        return h(ElMenu,
            {
                props: {
                    collapse:"false",
                },
                on: {
                }
              },
           this.renderMenu(menuData)
            );
    }
})